<!--组件-策略方向-->
<template>
  <div class="target">
    <div class="row acenter">
      <text class="font28 text2">{{T('策略方向')}}</text>
      <div class="explain warning1"></div>
    </div>
    <div class="select">

      <div :class="['select-but', target == 0 ? 'main1' : 'bg2']" @click="targetClick(0)">
        <text :class="['font28' , target == 0 ? 'text1' : 'text2']">{{T('做多')}}</text>
      </div>
      
      <div class="width20"></div>
      <div :class="['select-but', target == 1 ? 'main1' : 'bg2']" @click="targetClick(1)"> 
        <text :class="['font28' , target == 1 ? 'text1' : 'text2']">{{T('做空')}}</text>
      </div>

      <div class="width20" v-if="type"></div>
      <div :class="['select-but', target == 2 ? 'main1' : 'bg2']" v-if="type" @click="targetClick(2)"> 
        <text :class="['font28' , target == 2 ? 'text1' : 'text2']">{{T('双向')}}</text>
      </div>
    </div>
  </div>
</template>

<script>

import math from "@/_js/math";
const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {
  props:{
    type:{
      type: Number,
      default:1, //1多空双  0多空单 
    },
    target:{
      type: Number,
      default:0, //0 做多 1 做空， 2双向
    },
  },
  
  data() {
    return {
      T:T,
      math:math,
    };
  },

  mounted(){
  },

  methods:{

    /********************************** 点击触发*/
    //策略方向
    targetClick(target){
      if (this.target == target) {
        return;
      }
      this.$emit("targetClick", target);
    },
  }
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>

.target{
  width: 670px;
}

.select {
  flex-direction: row;
  justify-content: space-between;
  width: 670;
}

.select-but {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 76px;
  border-radius: 16px;
  margin-top: 20px;
}

.width20 {
  width: 20px;
}

</style>
